<!--
  Copyright 2024 The Ray Optics Simulation authors and contributors

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta property="og:title" content="Simulator - Ray Optics Simulation">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://phydemo.app/ray-optics/">
    <meta property="og:image" content="https://phydemo.app/ray-optics/img/image.png">
    <meta property="og:description" content="A free, open-source web app for creating and simulating 2D geometric optical scenes.">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">

    <title>Simulator - Ray Optics Simulation</title>
    <link rel="canonical" href="https://phydemo.app/ray-optics/simulator/">
    <link rel="icon" href="../img/icon.png" type="image/png">
    <link rel="manifest" href="./manifest/manifest.json">
    <link rel="apple-touch-icon" href="../img/icon.png">

  </head>
  <body style="background-color: black; margin: 0;">
    <!-- The temporary welcome message wrapper. The welcome element will be moved into the vue component when ready. -->
    <div id="welcome-wrapper">
      <div id="welcome" style="position:absolute; top: calc(50% + 34px); left: 0; width: 100%; transform: translate(0%, -50%); z-index: -3; color:rgba(255,255,255,0.5); font-size:12pt; text-align:center; line-height:2; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';">
        <div id="welcome_title" style="font-size:22pt">Welcome to Ray Optics Simulation</div>
        <div id="welcome_instruction">You need to enable JavaScript to run this app.</div>
        <div id="welcome_loading" style="display:none"></div>
      </div>
    </div>
    <script>
      // The strings for the welcome message is handled separately here, rather than in the main bundle to reduce the initial load time.
      // The locale data is to be generated by scripts/buildInlineLocaleData.mjs and injected by Webpack during the build process.
  
      var localeData = { /* LOCALE DATA */ };

      var lang = 'en';
      var url_lang = location.search.substr(1);
      if (url_lang && localeData[url_lang]) {
        lang = url_lang;
      } else if (navigator.language) {
        var browser_lang = navigator.language
        if (browser_lang.includes('-')) {
          browser_lang = browser_lang.split('-')[0].toLowerCase() + '-' + browser_lang.split('-')[1].toUpperCase();
        } else {
          browser_lang = browser_lang.toLowerCase();
        }

        if (browser_lang == 'zh-TW' || browser_lang == 'zh-HK' || browser_lang.startsWith('zh-HANT')) {
          lang = 'zh-TW';
        } else {
          if (localeData[browser_lang]) {
            lang = browser_lang;
          } else {
            for (var key in localeData) {
              if (browser_lang.startsWith(key.substring(0, 2))) {
                lang = key;
                break;
              }
            }
          }
        }
      }

      var route = (localeData[lang].route !== undefined) ? localeData[lang].route : '/' + lang;
      document.getElementById("welcome_title").innerHTML = (localeData[lang].welcome && localeData[lang].welcome.title) || localeData.en.welcome.title;
      document.getElementById("welcome_instruction").innerHTML = ((localeData[lang].welcome && localeData[lang].welcome.instruction) || localeData.en.welcome.instruction).replace('\n', '<br>').replace(/\[([^\]]+)\]\(\/gallery\)/g, function (match, text) {
        return `<a href="..${localeData[lang].gallery ? route : ''}/gallery/" style="color: #1b77ff; text-decoration: none;">${text}</a>`;
      });
      document.getElementById("welcome_loading").innerHTML = (localeData[lang].welcome && localeData[lang].welcome.loading) || localeData.en.welcome.loading;
      
      if (location.hash) {
        document.getElementById("welcome_loading").style.display = '';
        document.getElementById("welcome_instruction").style.display = 'none';
      }
  
    </script>

    <!-- Inline CSS for Spinner Animation -->
    <style>
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    </style>
    
    <!-- Temporary toolbar for loading -->
    <div id="toolbar-loading" style="position: absolute; left: 0; top: 0; width: 100%; height: 68px; background-color: rgba(255,255,255,0.88);">
      <div style="position: absolute; left: 50%; top: 34px; transform: translate(-50%, -50%);">
        <!-- Loading Spinner -->
        <div style="border: 4px solid rgba(0, 0, 0, 0.1); border-top: 4px solid gray; border-radius: 50%; width: 26px; height: 26px; animation: spin 1s linear infinite; box-sizing: border-box;"></div>
      </div>
    </div>

    <!-- The main Vue app -->
    <div id="vue-root" style="position: fixed; width: 100%; height: 100%; display: flex; flex-direction: column;"></div>

  </body>
</html>
